<h2 class="pac-page-title">{{ 'PAC.Integration.Integrations' | translate: {Default: 'Integrations' } }}</h2>

<div class="w-full flex justify-start p-4">
  <ngm-search [formControl]="searchControl" />
</div>

<nav class="min-h-full content-start gap-4 px-4 pt-4 grow shrink-0 pb-4 overflow-auto"
  ngmDynamicGrid colWidth="280"
  box="content-box">
  <ngm-card-create
    [title]=" 'PAC.Integration.AddIntegration' | translate: {Default: 'Add Integration'} "
    [helpTitle]="'PAC.Integration.AddIntegrationHelp' | translate: {Default: 'Learn more about custom integrations'}"
    helpUrl="/docs/server/organization/integration"
    (create)="newIntegration()"
  />

  @for (item of integrations(); track item.id) {
    <div class="ngm-card w-full p-4 group min-h-[160px] bg-gray-50 dark:bg-neutral-700 hover:bg-white dark:hover:bg-neutral-600">
      <div class="h-full flex flex-col cursor-pointer" (click)="open(item.id)">
        <div class="flex items-start gap-2">
          <emoji-avatar [avatar]="item.avatar" class="rounded-lg overflow-hidden shadow-sm" />
          <div class="flex flex-col items-start">
            <p class="text-sm flex items-center gap-1 text-token-text-secondary opacity-80">
              <ngm-tags [tags]="[{key: item.provider, caption: item.provider, color: 'green'}]" small />
              <span>{{item.updatedAt | date:'short'}}</span>
            </p>
            <div class="font-bold text-base">{{item.name}}</div>
          </div>
        </div>
        
        <div class="w-full my-1 text-sm text-text-secondary line-clamp-3" [title]="item.description">
          {{item.description}}
        </div>

        <div class="flex-1"></div>

        <div class="flex justify-between items-end">
          <div class="text-sm text-text-secondary">{{'PAC.KEY_WORDS.By' | translate: {Default: 'By'} }} <span>{{item.createdBy | user}}</span></div>
        </div>
      </div>

      <div class="absolute left-0 bottom-0 w-full p-1 hidden group-hover:flex">

        <div class="flex-1"></div>

        <button class="group flex items-center justify-center bg-gray-100 !bg-transparent h-8 w-8 !p-2 rounded-md border-none hover:!bg-black/5" type="button"
          #mt="cdkMenuTriggerFor"
          [cdkMenuTriggerFor]="menu"
          [cdkMenuTriggerData]="{item: item}"
          [class.active]="mt.isOpen()"
        >
          <i class="ri-more-line"></i>
        </button>
      </div>
    </div>
  }
</nav>

<ng-template #menu let-item="item">
  <div class="ngm-cdk-menu p-2" cdkMenu>
    <button cdkMenuItem class="ngm-cdk-menu-item p-1" (click)="edit(item)">
      <i class="ri-pencil-line mr-1"></i>
      <span>
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: "Edit"} }}
      </span>
    </button>

    <button cdkMenuItem ngmAppearance="danger" class="ngm-cdk-menu-item p-1" (click)="remove(item)">
      <i class="ri-delete-bin-line mr-1"></i>
      <span>{{ 'PAC.ACTIONS.Delete' | translate: {Default: "Delete"} }}</span>
    </button>
  </div>
</ng-template>
